<template>
	<view class="order">
		<view class="item" v-for="(item,index) in _this.list" :key="index">
			<view class="title">装运单号：{{item.express_sn}}</view>
			<view class="cell">
				<view class="key">序号：</view>
				<view class="value">{{item.id}}</view>
			</view>
			<view class="cell">
				<view class="key">日期：</view>
				<view class="value">{{item.date}}</view>
			</view>
			<view class="cell">
				<view class="key">时间：</view>
				<view class="value">{{item.time}}</view>
			</view>
			<view class="cell">
				<view class="key">运输公司：</view>
				<view class="value">{{item.express_name}}</view>
			</view>
			<view class="cell">
				<view class="key">车号：</view>
				<view class="value">{{item.car_no}}</view>
			</view>
			<view class="cell">
				<view class="key">物流名称：</view>
				<view class="value">{{item.express_sn}}</view>
			</view>
			<view class="foot">
				<view class="left">
					<text class="unit">总价：</text>
					<text class="price">￥{{item.total_price}}</text>
				</view>
				<view class="btn" @click="router(`/pagesA/my/orderDeta?id=${item.id}`)">查看详情</view>
			</view>
		</view>
		<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
	</view>

	<view class="footer">
		<view class="submit" @click="router('/pagesA/my/orderTotal')">查看汇总</view>
	</view>
</template>

<script setup>
	import useBase from "@/hooks/useBase.js";
	import useList from "@/hooks/useList.js";

	import {
		ref
	} from "vue"
	import {
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		orderList
	} from '@/util/request/api.js';

	const {
		router
	} = useBase();

	const {
		_this
	} = useList();

	const getList = async () => {
		let res = await orderList({
			params: {
				page: _this.page,
				limit: _this.limit,
			}
		});
		let list = res.list;
		_this.count = res.count;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.list.length == _this.count ? 'nomore' : 'loadmore';
	};
	getList();

	const loadmore = () => {
		if (_this.list.length >= _this.count) return;
		_this.page++;
		getList();
	};
	onReachBottom(() => loadmore());
</script>

<style lang="scss" scoped>
	.order {
		min-height: calc(100vh - var(--window-top));
		padding: 20rpx 30rpx 150rpx;
		box-sizing: border-box;
		background-color: #F7F7F7;

		.item {
			width: 100%;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			background: #FFFFFF;
			overflow: hidden;

			.title {
				height: 88rpx;
				line-height: 88rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: 400;
				padding-left: 30rpx;
				box-sizing: border-box;
				background: linear-gradient(-90deg, #FFFFFF 0%, #DBEBFF 100%);
			}

			.cell {
				display: flex;
				line-height: 1;
				padding: 30rpx 30rpx 0;
				box-sizing: border-box;

				.key {
					width: 140rpx;
					height: 28rpx;
					color: #666666;
					font-size: 28rpx;
					font-weight: 400;
				}

				.value {
					color: #333333;
					font-size: 28rpx;
					font-weight: 400;
				}
			}

			.foot {
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					.unit {
						color: #666666;
						font-size: 28rpx;
						font-weight: 400;
					}

					.price {
						color: #FF0000;
						font-size: 28rpx;
						font-weight: 600;
					}
				}

				.btn {
					width: 152rpx;
					height: 58rpx;
					line-height: 58rpx;
					text-align: center;
					color: #2282FC;
					font-size: 28rpx;
					font-weight: 400;

					border-radius: 100rpx;
					border: 1rpx solid #2282FC;
				}
			}
		}
	}

	.footer {
		width: 100%;
		height: 150rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #F7F7F7;
		
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 2;
		
		.submit {
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: 600;
			
			background: #2282FC;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 92, 255, 0.3);
			border-radius: 15rpx;
		}
	}
</style>